<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=[
"/js/service/virtual.js","/js/service/device.js","/webjars/1.0.0/js/components.js",
"/js/app/virtual.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css"] in base/>
<@base.page "">
    <!-- -->
    <div class="grid-content bg-purple-light">
        <el-col :span="24" class="content-wrapper">
            <section>
                <el-col :span="24" class="toolbar">
                    <el-row>
                        <el-button type="success" plain size="small" icon="el-icon-plus" @click="add(addCallback)" >添加</el-button>
                    </el-row>
                    <el-form :inline="true" :model="searchVm">
                        <el-form-item label="">
                            <el-input style="width:150px;" v-model="searchVm.channelName" clearable placeholder="通道名称"></el-input>
                            <el-input style="width:150px;" v-model="searchVm.deviceName" clearable placeholder="设备"></el-input>
                            <el-input style="width:150px;" v-model="searchVm.deviceCode" clearable placeholder="通信识别码"></el-input>
                        </el-form-item>
                        <@but.search "search()" ":loading='tableVm.loading'"/>
                        <el-form>
                </el-col>
                <!--表格-->
                <el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%" v-loading="tableVm.loading">
                    <el-table-column prop="name" label="通道名称"  min-width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="channelCode" label="通道号"  min-width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="dataType" label="类型"  min-width="100" show-overflow-tooltip>
                        <template scope="scope">
                            {{scope.row.dataType | formatSwitch}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="yuansu" label="元素"  min-width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="deviceName" label="设备名"  min-width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="deviceCode" label="设备通信识别码"  min-width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="remark" label="备注"  show-overflow-tooltip></el-table-column>
                    <el-table-column label="操作" min-width="200">
                        <template scope="scope">
                            <!--<@tabt.show "show(scope.$index,scope.row)" />-->
                            <@tabt.edit "edit(scope.$index,scope.row)" />
                            <el-button type="success" size="mini"  @click="editFx(scope.$index,scope.row)" icon="icon-third-mini-jusuan" >公式</el-button>
                            <@tabt.delete "deleteRow(scope.$index,scope.row)" />
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination  @current-change="handleCurrentChange" :current-page="tableVm.pageIndex" :page-size="tableVm.pageSize" layout="prev, pager, next, jumper" :total="tableVm.total"></el-pagination>
                </div>
                <!--编辑界面-->
                <el-dialog :title="editVm.oprate" :visible.sync="editVm.visible" width="900px">
                    <el-form :model="editVm.data" label-width="150px" :rules="editVm.editFormRules.formRules" ref="editForm">
                        <el-row>
                            <el-form-item label="通道名" prop="name">
                                <el-input v-model="editVm.data.name" :disabled="!editVm.isEdit" maxlength="20"></el-input>
                            </el-form-item>
                            <el-form-item label="设备" prop="deviceId">
                                <el-select v-model="editVm.data.deviceId" placeholder="请选择" style="width:100%;" filterable>
                                    <el-option
                                            v-for="item in deviceList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                        <span style="float: left">{{ item.name }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.deviceCode }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="通道号" prop="channelCode">
                                <el-input v-model="editVm.data.channelCode" :disabled="!editVm.isEdit" maxlength="5" @blur="enterChannelCode(editVm)"></el-input>
                            </el-form-item>
                            <el-form-item label="类型" prop="dataType">
                                <!--<el-select v-model="editVm.data.dataType" :disabled="!editVm.isEdit" style="width:100%;">
                                    <el-option label="模拟量" value="0"></el-option>
                                    <el-option label="开关量" value="1"></el-option>
                                </el-select>-->
                                <el-select v-model="editVm.data.dataType" :disabled="!editVm.isEdit " style="width:100%;">
                                    <el-option v-for="item in switchDataList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="元素" prop="yuansu">
                                <el-input v-model="editVm.data.yuansu" :disabled="!editVm.isEdit" maxlength="20"></el-input>
                            </el-form-item>
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model="editVm.data.remark" :disabled="!editVm.isEdit" maxlength="50"></el-input>
                            </el-form-item>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <@but.back "editVm.visible = false" />
                        <@but.save "save(editVm)" 'v-if="editVm.isEdit" :loading="editVm.loading"'/>
                    </div>
                </el-dialog>
            </section>
        </el-col>
    </div>

</@base.page>
